// select标签

import React, {Component} from 'react';

class Select extends Component {
    constructor(props){
        super(props);
        this.state = {
            value: 'TypeScript',
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(e){
        this.setState({
            value: e.target.value
        })
    }
    handleSubmit(e){
       alert(`你选中的是${this.state.value}!`)
        e.preventDefault();
    }
    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        我是Select组件，Pick your favorite La Croix flavor:
                        <select value={this.state.value} onChange={this.handleChange}>
                            <option value="Reacat">React</option>
                            <option value="Vue">Vue</option>
                            <option value="Angular">Angular</option>
                            <option value="TypeScript">TypeScript</option>
                            <option value="Webpack">Webpack</option>
                        </select>
                    </label>
                    <input type="submit" value="submit"/>
                </form>
            </div>
        )
    }
}

export default Select;